<template>
  <div class="container">
    <van-nav-bar title="评论区" placeholder fixed />
    <van-empty description="暂无评论" v-if="ordersInfo.length == 0"/>
    <div v-else>
      <!-- 评分区域 -->
    <div class="rate">
      <div class="rate_all">
        <div class="rate_num">{{rate.all | toFixed1}}</div>
        <div class="rate_num_all">
          <span>综合评分</span>
          <span><van-rate :value="rate.all" size="12" readonly allow-half/></span>
        </div>
      </div>
      <div class="rate_item">
        <span>味道</span>
        <span>{{rate.flavor | toFixed1}}</span>
      </div>
      <div class="rate_item">
        <span>包装</span>
        <span>{{rate.package | toFixed1}}</span>
      </div>
      <div class="rate_item">
        <span>配送</span>
        <span>{{rate.delivery | toFixed1}}</span>
      </div>
      <van-divider />
    </div>
    <!-- 评论区域 -->
    <div class="comment_list">
      <div class="comment_item" v-for="v in ordersInfo" :key="v.orderID">
        <van-row>
        <van-col span="1"></van-col>
        <van-col span="3"><van-icon name="smile-o" size="30" color="#666" /></van-col>
        <van-col span="20">
          <!-- 第一行 -->
          <van-row type="flex" justify="space-between">
            <van-col span="6">{{v.orderUserName || '匿名用户'}}</van-col>
            <van-col span="6"><span class="comment_date">{{v.orderDate | dateFormat}}</span></van-col>
          </van-row>
          <!-- 第二行 -->
          <van-row  gutter="5" class="rate_2">
            <van-col><van-rate :value="v.rate" size="10" readonly allow-half/></van-col>
            <van-col>
              <span class="comment_rate_down">{{v.rate | handleRateAll}}</span>
            </van-col>
          </van-row>
          <!-- 第三行客户评论 -->
          <van-row type="flex">
            <van-col span="22">
            {{v.passengerReviews}}
            </van-col>
            <van-col span="2"></van-col>
          </van-row>
          <!-- 第四行后台回复评论 -->
          <van-row type="flex">
            <van-col span="22">
              <div class="reply_comment" v-show="v.replyReviews!=null">商家回复：<span>{{v.replyReviews}}</span></div>
            </van-col>
            <van-col span="2"></van-col>
          </van-row>
        </van-col>
      </van-row>
      </div>
      
    </div>
    </div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      rate: {

      },
      ordersInfo: []
    };
  },
  created() {
    // 加载页面时设置底部导航栏激活状态
    this.$store.commit("setBottomNavActive", 1);
    //加载评论列表
    this.getCommentList()
  },
  methods: {
    //加载评论列表
    async getCommentList() {
      const { data: res } = await this.$http.get('order')
      // 各项的综合评分
      let rateInfo = {
        flavor: 0,
        package: 0,
        delivery: 0,
        all: 0
      }
      console.log(res.data);
      
      // 已评论的订单数
      let orders = 0
      res.data.forEach( v => {
        if(v.rate == null) return
        orders++
        v.rate = v.rate.split(' ')
        rateInfo.flavor += Number(v.rate[0])
        rateInfo.package += Number(v.rate[1])
        rateInfo.delivery += Number(v.rate[2])
        v.rate =  (Number(v.rate[0]) + Number(v.rate[1]) + Number(v.rate[2]))/3
      })
      
      rateInfo.flavor = (rateInfo.flavor/orders)
      rateInfo.package = (rateInfo.package/orders)
      rateInfo.delivery = (rateInfo.delivery/orders)
      rateInfo.all =((rateInfo.flavor + rateInfo.package + rateInfo.delivery) / 3)
      this.rate = rateInfo
      
      //有效的订单信息
      this.ordersInfo = res.data.filter( v => v.rate!=null)

      console.log('this.ordersInfo: ', this.ordersInfo);
    }
  },
  filters: {
    //处理时间
    dateFormat: (val) => {
        const dt = new Date(Number(val))
        const y = dt.getFullYear()
        const m = (dt.getMonth() + 1 + '').padStart(2, 0)
        const d = (dt.getDate() + '').padStart(2, 0)
        return `${y}-${m}-${d}`
      },
      //处理评分状态
    handleRateAll: (val) => {
      if(val < 2.5) return '较差'
      if(val < 3.5) return '一般'
      if(val < 5.0) return '很好'
    },
    //处理固定小数点后一位
    toFixed1: (val) => {
      return val.toFixed(1)
    } 
  }
};
</script>
<style lang="less" scoped>
.container {
  padding-bottom: 60px;
  .rate {
    display: flex;
    height: 50px;
    padding-top: 5px;
    border-bottom: 1px solid #eee;
    .rate_all {
      flex: 3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0 0 15px;
      .rate_num {
        flex: 1;
        font-size: 24px;
        color: #ff6100;
        font-weight: 500;
        padding-left: 5px;
      }
      .rate_num_all {
        flex: 2;
        display: flex;
        flex-direction: column;
        color: #666;
        span {
          flex: 1;
          font-size: 14px;
        }
      }
    }
    .rate_item {
      flex: 1;
      display: flex;
      flex-direction: column;
      color: #666;
      span {
        flex: 1;
        &:nth-child(2) {
          font-size: 16px;
        }
      }
    }
  }
  .comment_list {
    
    .comment_date {
      color: #aaa;
    }
    .comment_rate_down {
      font-size: 10px;
      color: rgb(233, 177, 88);
    }
    .rate_2 {
      padding: 3px 0 8px 0;
    }
    .reply_comment {
      background-color: #fafafa;
      // border: 1px solid #eee;
      margin-top: 10px;
      padding: 5px 3px 5px;
      position: relative;
    }
    .reply_comment::after {
      content: '';
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #fafafa;
        border-left: 8px solid transparent;
      position: absolute;
      top: -15px;
      left: 10px;
    }
    .comment_item {
      padding-top: 8px;
      border-bottom: 1px solid #eee;
      padding-bottom: 9px;
    }
    .comment_item:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }
  }
}
</style>
